<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <div>用户名:{{name}}</div>
        <div>年龄： 
            <button @click="jian()">-</button>
            <input type="text" value="${age}">
            <button @click="jia()">+</button>
        </div>
        <div>性别：{{sex}}</div>
    </div>
    <script src="vue.js"></script>
    <script>
        // 
        let data=  {
                name: "小明",  
                age: 20,
                sex: "男"
            }  //data是用来传数据的
        

            // let box = document.querySelector("#box")
            // box.innerHTML = box.innerHTML.replace(/\$\{(.+)\}/g,(all,group)=>{
            //     // all 代表所有的  group代表他的属性
            //     console.log(all,group);
            //     return data[group] 
            // })




    let app = new Vue({
        created(){
            this.$http.get()
        },
        el:"#box",
        data:{
                name: "小明", 
                age: 20,
                sex: "男"
        },  //data是
        methods:{
            jian(){
                this.data.age--   //年龄减，刷新页面
                this.compile()
            },
            jia(){              
                this.data.age++  //年龄加，刷新页面
                this.compile()
            },
        }
    })




    
    let obj = {
        hao:function hao(){

        },
        hao1:function hao1(){

        }
    }
    for (const item in obj) {
        console.log(item);
        console.log(obj[item]);
    }
    let po = app.__proto__
    console.log(po)  ;   
    for (const item in obj) {
        po[item] = obj[item]
    }







        // 封装构造函数， ，观察到有两个地方不同，1.标签的ID名和Class名
        // 2.数据不同
        // let v1 = new Vue({
        //     el:"#box",  //el是用来传入  id
        //     data: {
        //         name: "小明",
        //         age: 20,
        //         sex: "男"
        //     },   //data是用来传数据的
        //     // 传入方法
        //     methods:{
        //         reduce(){
        //             this.data.age--,
        //             this.compile()
        //         },
        //         jia(){
        //             this.data.age++
        //             this.compile()
        //         }
        //     }
        // })

        // console.log(v1);
        // function reduce(){
        //     console.log("减少");
        // }









        // // replace(要匹配的, 函数)
        // // 函数(all,group)=> 用于接收捕获到的完整字符和分组中的字符
        // // 每匹配一次都会触发一次这个函数, 这个函数的返回值即是【要替换的值】
        // box.innerHTML = box.innerHTML.replace(/\$\{(.+)\}/g,(all,group)=>{
        //     console.log(all,group);
        //     return data[group]
        // })



    </script>
</body>
</html>